<!-- 砍价商品详情 -->
<template>
    <view class="page p-re" v-if="pageData">
        <view class="back bgwhite flexac" :style="{top: menuButtonTop+'px'}">
            <text class="iconfont icon-xiangzuo black" @click="back()"></text>
        </view>
        <image :src="imgUrl + 'brgn_bg2.png'" mode="widthFix" class="topImg p-ab"></image>
        <view class="main p-re" :style="{backgroundImage:'url(' + imgUrl + 'brgn_book.png' + ')'}">
            <view class="up p-re">
                <view class="d-flex">
                    <image :src="$imgUrls(pageData.img)" mode="aspectFill" class="img"></image>
                    <view class="p-left26 d-flex f-column j-sb flex-1">
                        <view class="size28 color_22 ellipsis">{{ pageData.name }}</view>
                        <!-- 倒计时 -->
                        <u-count-down :time="pageData.left_time" @change="onChange" v-if="pageData.status == 0">
                            <view class="d-flex a-center">
                                <view class="count" v-if="timeData.days">{{ timeData.days }}</view>
                                <text class="dot size22" v-if="timeData.days">天</text>
                                <view class="count">{{ timeData.hours<10?'0'+timeData.hours:timeData.hours }}</view>
                                <text class="dot">:</text>
                                <view class="count">{{ timeData.minutes<10?'0'+timeData.minutes:timeData.minutes }}</view>
                                <text class="dot">:</text>
                                <view class="count">{{ timeData.seconds<10?'0'+timeData.seconds:timeData.seconds }}</view>
                                <text class="size22 color_66 m-left14">后结束</text>
                            </view>
                        </u-count-down>
                        <view class="rect padding2-14 size22 color_FF3" v-else>已有{{ pageData.sales_number }}人{{ pageData.floor_price }}元拿 ></view>
                        <view class="d-flex j-sb a-center">
                            <view class="btn_1 size22 white t-letter2 flexac">砍到{{ pageData.floor_price }}元拿</view>
                            <view class="size22 color_FF3" v-if="pageData.status == 0">已有{{ pageData.sales_number }}人{{ pageData.floor_price }}元拿 ></view>
                        </view>
                    </view>
                </view>
                <!-- 提示或进度条 -->
                <view class="tip bor_radius_6 flexac f-column t-letter4" v-if="pageData.status == -1">
                    <view class="size22 line34">点击邀请分享给好友砍价</view>
                    <view class="size22 line34">规定时间内砍价成功商品低价拿</view>
                </view>
                <view class="m-top70" v-if="pageData.status == 0 || pageData.status == 1">
                    <view class="size26 color_66 text-center m-bot10" v-if="pageData.status == 0">
                        已砍<text class="size30 color_FF3 bold">{{ pageData.bargain_money }}</text>元，还差<text class="size30 color_FF3 bold">{{ pageData.need_bargain }}</text>元好礼带回家
                    </view>
                    <view class="size26 color_66 text-center m-bot10" v-if="pageData.status == 1">
                        成功砍价到<text class="size30 color_FF3 bold">{{ pageData.floor_price }}</text>元，点击领取好礼带回家
                    </view>
                    <u-line-progress :percentage="parseFloat(pageData.percent)" inactiveColor="#FDAFB5" height="9" :showText="false"></u-line-progress>
                    <view class="d-flex j-sb m-top12">
                        <view class="size22 color_66">原价<text class="size22 color_FF3 bold">{{ pageData.price }}元</text></view>
                        <view class="size22 color_66">底价<text class="size22 color_FF3 bold">{{ pageData.floor_price }}元</text></view>
                    </view>
                </view>
                <view class="tip fail bor_radius_6 flexac f-column t-letter4" v-if="pageData.status == 2">
                    <view class="size22 line34">很遗憾，砍价因超时失败</view>
                    <view class="size22 line34">您可以重新发起砍价</view>
                </view>
                <view class="btn_2 margin30 white flexac p-re" v-for="(item,index) in pageData.button" :key="index" @click="btnClick(item.type)">
                    <button open-type="share" class="btn-contact" v-if="item.type == 0"></button>
                    <text class="size38">{{ item.text }}</text>
                </view>
                <view class="line p-ab"></view>
            </view>
            <view class="down p-re">
                <view class="flexac" style="height: 136rpx;">
                    <u-tabs :list="tabList" lineColor="linear-gradient(90deg, #F41C26, #FFB47B)" lineWidth="72" lineHeight="2" 
                        :inactiveStyle="{color:'#848484',fontSize:'30rpx',transform:'scale(1)'}" @click="tabClick"
                        :activeStyle="{color:'#F6302E',fontSize:'30rpx',fontWeight:'bold',transform:'scale(1.2)'}"></u-tabs>
                </view>
                <view class="cont">
                    <view class="p-left60 p-right50" v-if="!curTab && pageData.help">
                        <view class="item d-flex a-center" v-for="(item,index) in pageData.help" :key="index">
                            <image :src="$imgUrls(item.v_headimg)" mode="aspectFill" class="avatar bor_radius"></image>
                            <view class="flex-1 p-left30 p-top4">
                                <view class="size30 color_33 bold ellipsis">{{ item.v_name }}</view>
                                <view class="h6 color_99">{{ item.add_time }}</view>
                            </view>
                            <view class="size28 color_44">砍掉了<text class="price size28 bold">{{ item.bargain_money }}</text>元</view>
                        </view>
                    </view>
                    <view class="color_99 text-center t-letter4 p-top60" v-if="!curTab && !pageData.help">
                        <image :src="imgUrl + 'brgn_empty.png'" mode="widthFix" style="width: 322rpx;"></image>
                        <view class="size22 line34 m-top30">还没有砍价记录</view>
                        <view class="size22 line34">赶紧邀请好友帮您砍价吧</view>
                    </view>
                    <view class="padding30-50" v-if="curTab">
                        <u-parse :content="pageData.content" :domain="$imgUrl"></u-parse>
                    </view>
                </view>
                <view class="line p-ab" style="top: 136rpx;"></view>
            </view>
        </view>
    </view>
</template>

<script>
import { mapState } from 'vuex'
export default {
    data(){
        return {
            act_id: '',
            goods_id: '',
            record_id: '',
            pageData: '',
            imgUrl: this.imgUrl + 'Uploads/diy/img/',
            curTab: 0,
            tabList: [
                { name: '砍价记录' },
                { name: '商品详情' }
            ],
            timeData: {},
            menuButtonTop: getApp().globalData.menuButtonObject.top // 胶囊按钮的top值
        }
    },
    computed: {
        ...mapState(['vid'])
    },
    onLoad(e){
        if(e.act_id) this.act_id = e.act_id
        if(e.goods_id) this.goods_id = e.goods_id
        if(e.record_id) this.record_id = e.record_id
    },
    onShow(){
        this.getDetail()
    },
    methods: {
        getDetail(){
            this.$http.get({
                url: '/BargainApi/recordDetail',
                data: {
                    record_id: this.record_id,
                    goods_id: this.goods_id,
                    act_id: this.act_id
                }
            }).then(res=>{
                this.pageData = res.data
                let { record_id, act_id, goods_id } = res.data
                if(record_id) this.record_id = record_id
                if(act_id) this.act_id = act_id
                if(goods_id) this.goods_id = goods_id
            })
        },
        doBargain(){ // 发起砍价
            return new Promise(resolve=>{
                this.$http.post({
                    url: '/BargainApi/doBargain',
                    data: {
                        act_id: this.act_id,
                        goods_id: this.goods_id
                    }
                }).then(res=>{
                    resolve(res.data)
                })
            })
        },
        tabClick({index}){
            this.curTab = index
        },
        onChange(e){
            this.timeData = e
        },
        async btnClick(type){
            console.log('type', type)
            if(type == 2){ // 重新发起砍价
                this.record_id = await this.doBargain()
                this.getDetail()
            } else if (type == 3){ // 填写收货地址
                let params = `?goods_id=${this.goods_id}&goods_num=1&record_id=${this.record_id}`
                this.toUrl('/orderPage/order/createOrders' + params)
            } else if (type == 6){ // 生成订单未支付
                if(this.pageData.order_id == 0) return this.$Toast('订单id为空')
                this.toUrl('/orderPage/order/orderDetail?order_id=' + this.pageData.order_id)
            }
        }
    },
    async onShareAppMessage(){
        if(!this.record_id){
            this.record_id = await this.doBargain()
        }
        return {
            title: this.pageData.name,
            path: `/pages/index/index?share_v_id=${this.vid}&pageType=25&record_id=${this.record_id}`
        }
    }
}
</script>

<style lang="scss" scoped>
.page {
    background: linear-gradient(0deg, #FFAF6F, #F6583E);
    padding: 679rpx 22rpx 76rpx 23rpx;
    .back {
        width: 60rpx;
        height: 60rpx;
        border-radius: 50%;
        opacity: 0.6;
        position: fixed;
        left: 24rpx;
        z-index: 100;
    }
    .topImg {
        width: 630rpx;
        left: 60rpx;
        top: 158rpx;
    }
}
.main {
    height: 1340rpx;
    background-repeat: no-repeat;
    background-size: 100% auto;
    .up {
        height: 630rpx;
        padding: 86rpx 45rpx 0 45rpx;
        .img {
            width: 160rpx;
            height: 160rpx;
        }
        .rect {
            width: fit-content;
            border: 1px solid;
            border-image: linear-gradient(-90deg, #F41C26, #FFA35E) 1;
            border-radius: 2rpx;
        }
        .btn_1 {
            padding: 0 20rpx;
            height: 46rpx; 
            background: #FF3942;
            border-radius: 23rpx;
        }
        .tip {
            height: 80rpx;
            background: #FFECE6;    
            color: #D98970;
            margin-top: 74rpx;
            &.fail {
                background: #FFDCDE;
                color: #EE3038;
            }
        }
        .btn_2 {
            width: 425rpx;
            height: 86rpx;    
            background: linear-gradient(-90deg, #F41C26, #FFA35E);          
            box-shadow: 0rpx 6rpx 16rpx 0rpx rgba(135,86,56,0.3);
            border-radius: 43rpx;
        }
        .count {
            width: 34rpx;
            line-height: 34rpx;   
            background: #FFD0A0;
            color: #810000;
            font-weight: bold;
            text-align: center;
        }
        .dot {
            font-size: 28rpx;
            color: #810000;
            font-weight: bold;
            margin: 0 10rpx;
        }
    }
    .down .cont{
        height: 513rpx;
        overflow-x: hidden;
        overflow-y: auto;   
        .item {
            height: 128rpx;
            border-bottom: 1rpx solid #E6E6E6;
            .avatar {
                width: 80rpx;
                height: 80rpx;
            }
            .price {
                color: #FF0030;
            }
        }
    }
    .line {
        width: 632rpx;
        height: 2rpx;
        left: 37rpx;
        top: 290rpx;
        background-image: linear-gradient(to right, #FF9B7B 60%, rgba(255,255,255,0) 0%);
        background-position: bottom;
        background-size: 24rpx 1rpx; // 间距 高度
        background-repeat: repeat-x;
    }
}
::v-deep .u-line-progress__line {
    background: linear-gradient(-90deg, #F41C26, #FFA35E);
}
</style>